<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学员管理 - 管理员面板</title>
  <link rel="stylesheet" href="./../../static/manager/css/style.css">
  <script src="./../../static/manager/js/student.js"></script>
  <!-- CSV 解析库 (PapaParse) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

  <!-- Excel 解析库 (SheetJS) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

</head>
<body>
<header class="navbar">
  <div class="logo">AdminPanel</div>
  <h1>管理员控制面板</h1>
  <div class="user-info">
    <img src="/img/admin-avatar.jpg" alt="Admin Avatar" class="avatar">
    <span>管理员</span>
    <button class="logout-btn">退出</button>
  </div>
</header>
<aside class="sidebar">
  <ul>
    <li><a href="index.html">工作首页</a></li>
    <li><a href="activity.html">活动管理</a></li>
    <li><a href="class.html">教学班管理</a></li>
    <li><a href="student.html">学员管理</a></li>
    <li><a href="teacher.html">教师管理</a></li>
  </ul>
</aside>

<main>
  <section class="student-management">
    <h2>学员管理</h2>

    <!-- 学员搜索功能 -->
    <div class="search-box">
      <input type="text" id="search-student-name" placeholder="搜索学员姓名...">

      <!-- 添加学员状态选择框 -->
      <select id="search-status">
        <option value="">选择状态</option>
        <option value="在读">在读</option>
        <option value="离校">离校</option>
      </select>

      <button id="search-btn">搜索</button>

      <!-- 新增学员按钮 -->
      <button onclick="openModal('create')">新增学员</button>

      <!-- 批量导入按钮 -->
      <button onclick="importStudents()">批量导入学员</button>
      <input type="file" id="import-file" accept=".csv, .xlsx" style="display: none;" onchange="handleFileUpload(event)">

    </div>

    <!-- 学员列表 -->
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>姓名</th>
        <th>性别</th>
        <th>联系方式</th>
        <th>邮箱</th>
        <th>加入日期</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody id="student-table-body">
      <!-- 动态加载学员数据 -->
      </tbody>
    </table>

  </section>
</main>

<!-- 弹窗 -->
<div id="studentModal" class="modal">
  <div class="modal-content">
    <h3 id="modal-title">新增学员</h3>
    <form id="student-form">
      <label for="student-name">用户名</label>
      <input type="text" id="student-name" name="name" required>

      <label for="student-realname">姓名</label>
      <input type="text" id="student-realname" name="realname" required>

      <label for="student-gender">性别</label>
      <select id="student-gender" name="gender" required>
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="other">其他</option>
      </select>

      <label for="student-contact">联系方式</label>
      <input type="tel" id="student-contact" name="contact">

      <label for="student-email">邮箱</label>
      <input type="email" id="student-email" name="email">

      <label for="student-join-date">加入日期</label>
      <input type="date" id="student-join-date" name="joinDate">

      <label for="student-status">状态</label>
      <select id="student-status" name="status" required>
        <option value="在读">在读</option>
        <option value="离校">离校</option>
      </select>

      <div class="button-container">
        <button type="submit" id="save-btn">保存</button>
        <button type="button" id="cancel-btn">取消</button>
      </div>
    </form>
  </div>
</div>

<footer class="footer">
  <p>© 2024 AdminPanel, All Rights Reserved</p>
  <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
</footer>


</body>
</html>
